<template>
  <div @click="toggle" class="voice-view">
    <div class="voice-view_icon" :class="className"></div>
    <span class="voice-view_text">6s</span>
  </div>
</template>

<script lang="ts" setup>
import Timer from '@/utils/timer/Timer'
import { ref, watch } from 'vue'
import useVoice from './useVoice'

let classNames: ['', 'two', 'three'] = ['', 'two', 'three']

const className = ref<'' | 'two' | 'three'>('three')

const timer = new Timer({ time: 600 })

let index = 2
let isPlay = ref(false)

const { playVoice, stopVoice } = useVoice()

const props = defineProps<{
  src: string
}>()

watch(isPlay, (isPlay) => {
  if (isPlay) {
    start()
  } else {
    stop()
  }
})

timer.fn = function () {
  let i = index + 1
  if (i > 2) {
    i = 0
  }
  set(i)
}

function set(i: number) {
  index = i
  className.value = classNames[index]
}

function start() {
  timer.start()
  set(0)

  playVoice(props.src)
}
function stop() {
  timer.stop()
  set(2)
  stopVoice()
}

function toggle() {
  isPlay.value = !isPlay.value
}
</script>
<style lang="scss">
$scale: 10.2;

.voice-view {
  // width: 50px;
  padding: 0 10px;
  height: 38px;
  background-color: #e0e0e0;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  // .nut-icon {
  //   // background-color: #c3c3c3;
  //   color: #fff;
  //   font-size: 50px;
  //   line-height: 50px;
  //   // display: inline-block;
  //   height: 50px;
  // }
}

.voice-view_icon {
  // display: inline-block;
  background: url('./voices.png') no-repeat (-419px / $scale) 0;
  background-size: auto 100%;
  width: (206px / $scale);
  height: (278px / $scale);

  &.two {
    background-position-x: (-214px / $scale);
  }

  &.three {
    background-position-x: 0;
  }
}

.voice-view_text {
  margin-left: 10px;
}
</style>
